/**
 * 全局公用的钩子方法(逻辑相关的)
 * 都是以use开头的
 *
 */

import { ref, onUnmounted } from 'vue'
// 导入监控元素是否进入可视区函数
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'

// 这是vue3.0的特色
// apiFn 是请求的方法(callback函数),因为是动态传请求,调用不同获取数据的方法,所以得传形参
export const useObserver = (apiFn) => {
  /**
      * 监控元素是否进入可视区
      * 1.通过回调函数的"isIntersecting",判断组件或元素是否进入可视区
      * 2.监控是一直在执行(第一次进入时,发起请求(只发一次))
      */
  // 定义一个ref变量.获取DOM元素,和组件绑定
  const target = ref(null)
  // VueUse的 useIntersectionObserver 函数, 是一直会执行,但是加了stop就不会在持续执行了
  const { stop } = useIntersectionObserver(
    target,
    // [{ isIntersecting }]  是先数组解构,然后在对象结构,取出isIntersecting的值
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting  组件或元素是否进入可视区, 返回值是布尔值, true是进入,false是没有进入
    //   console.log('组件是否进入可视区:' + isIntersecting)
      if (isIntersecting) {
        // console.log('组件进入可视区了,发一次请求,达到目的,就关闭监控')
        // 调用获取人气推荐
        apiFn()
        // 关闭监控,拿到数据后,就关闭监控
        stop()
      }
    },
    {
      // 第三个参数 threshold ,类似于 判断进入可视区域多少距离执行,取值0-1
      threshold: 0
    }
  )

  return { target }
}

/**
 *
 * @param {*} time 倒计时时间（60）
 */
export function useCountDown (time) {
  /**
     * pause 停止
     * resume 开始
     */
  const count = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    // console.log(count.value)
    count.value--
    if (count.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })

  const start = () => {
    // 每次开始判断如果是0，重新开始
    if (count.value === 0) {
      count.value = time
    }
    // 开始倒计时
    resume()
  }
  // 组件销毁时，清除定时器
  onUnmounted(() => {
    pause()
  })
  // 暴露=》数据和方法
  return { count, start, pause }
}
